<template>
	<el-dropdown
		trigger="click"
		class="international"
		@command="handleSetLanguage"
	>
		<div>
			<svg-icon class-name="international-icon" icon-class="language" />
		</div>
		<el-dropdown-menu slot="dropdown">
			<el-dropdown-item :disabled="language === 'zh'" command="zh">
				中文
			</el-dropdown-item>
			<el-dropdown-item :disabled="language === 'en'" command="en">
				English
			</el-dropdown-item>
			<!-- <el-dropdown-item :disabled="language==='es'" command="es">
				Español
			</el-dropdown-item>
			<el-dropdown-item :disabled="language==='ja'" command="ja">
				日本語
			</el-dropdown-item> -->
		</el-dropdown-menu>
	</el-dropdown>
</template>

<script>
export default {
	computed: {
		language() {
			return this.$store.getters.language;
		}
	},
	methods: {
		handleSetLanguage(lang) {
			this.$i18n.locale = lang;
			this.$store.dispatch("app/setLanguage", lang);
			this.$message({
				message: "Switch Language Success",
				type: "success"
			});
		}
	}
};
</script>
